<template>
    <div class="page">
        <h3>Vue的递归组件渲染嵌套评论</h3>
        <div class="page-comment">
            <ul v-for="(item, index) in res" :key="index" class="comments">
                <RecursionComment
                    v-bind="{ comment: item.comment,nickName: item.nickName,header: item.header, children: item.children,}" />
            </ul>
        </div>
        <h3>使用递归函数</h3>
        <div style="height:1340px;border: 1px solid #666;">
            <div style="height:80px">
                <div v-html="comment"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import RecursionComment from "./RecursionComment.vue";
import { ref } from "vue"

let res = [{
    "id": 1,
    "nickName": "js大牛",
    "header": "https://img0.baidu.com/it/u=1348709467,3751255405&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
    "comment": "听说今天要使用递归实现评论列表",
    "children": [{
        "id": 2,
        "nickName": "在学算法的小胖",
        "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg",
        "comment": "哇，太好了，可以很好的提升我的算法了，大家有什么好的方法去实现了？",
        "children": [{
            "id": 3,
            "nickName": "面壁者-肖叮",
            "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg",
            "comment": "我也想知道，感觉这个好难哦",
            "children": []
        }, {
            "id": 4,
            "nickName": "从0到1",
            "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg",
            "comment": "我现在也没用思路，只能边写边想了。"
        }]
    }]
}, {
    "id": 5,
    "nickName": "js大牛",
    "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg",
    "comment": "这个功能需求是一个学长公司的，学长现在发展不错哦，月薪30K",
    "children": [{
        "id": 6,
        "nickName": "在学算法的小胖",
        "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
        "comment": "膜拜大佬，向大佬学习",
        "children": []
    }, {
        "id": 7,
        "nickName": "面壁者-肖叮",
        "header": "http://img.duoziwang.com/2016/12/23/01594969440.jpg",
        "comment": "膜拜大佬，你是我的偶像，我也要努力拿高薪",
        "children": []
    }, {
        "id": 8,
        "nickName": "从0到1",
        "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
        "comment": "太棒了，努力，努力！",
        "children": [{
            "id": 9,
            "nickName": "YuePeng+",
            "header": "http://img.duoziwang.com/2017/07/26183817321274.jpg",
            "comment": "我觉得我应该能够很快做出来，大家觉得我有这个实力么？",
            "children": [{
                "id": 12,
                "nickName": "YuePeng+",
                "header": "http://img.duoziwang.com/2016/10/27/15120514920.jpg",
                "comment": "吹牛逼吧！",
                "children": [{
                    "id": 13,
                    "nickName": "Evan-Nightly",
                    "header": "http://img.duoziwang.com/2016/10/27/15110914705.jpg",
                    "comment": "等着瞧！就做出来给你看",
                    "children": []
                }]
            }]
        }, {
            "id": 8,
            "nickName": "从0到1",
            "header": "http://img.duoziwang.com/2017/09/1611314386085.jpg",
            "comment": "大家有什么好方法了，发出来参考一下",
            "children": [{
                "id": 9,
                "nickName": "YuePeng+",
                "header": "http://img.duoziwang.com/2016/10/27/15120614923.jpg",
                "comment": "我只知道递归就是函数调用函数，但结构渲染是个难题",
                "children": []
            }, {
                "id": 8,
                "nickName": "从0到1",
                "header": "http://img.duoziwang.com/2016/12/17/10384445124.jpg",
                "comment": "我现在一点思路都没有，救救我啊",
                "children": [{
                    "id": 10,
                    "nickName": "YuePeng+",
                    "header": "http://img.duoziwang.com/2017/07/26183817321147.jpg",
                    "comment": "我也是，怎么办了？",
                    "children": []
                }, {
                    "id": 11,
                    "nickName": "hvang1988",
                    "header": "http://img.duoziwang.com/2016/10/27/15120514921.jpg",
                    "comment": "终于做出来了，好开心啊！其实也不难，就是思路的问题。",
                    "children": []
                }]
            }]
        }]
    }]
}];

let comment = ref('')

function headlerRecursion(comments:any) {
    let str = ''
    if(comments.length == 0) return ''
    comments.forEach((item:any)=>{
        str += `
            <ul>
                <li>
                    <div style="height:80px">
                    <div style="display: flex;align-items: center;">
                        <img style="width:40px;height:40px;border-radius: 20px;" src="${item.header}">
                        <span style="margin-left: 10px;">${item.nickName}</span>
                    </div>
                    <div style="margin-left:40px">${item.comment}</div>
                    </div>
                    <ul v-if="children.length" style="padding-left:0px">
                        ${item.children?.length>0?headlerRecursion(item.children):''}
                    </ul>
                </li>
            </ul>
        `
    })
    return str
}
comment.value = headlerRecursion(res)

</script>
   
<style>
.comments ul {
    padding-left: 40px;
    margin: 6px 0;
}
</style>

<style lang="less" scoped>
.page {
    margin: 20px;
    .page-comment {
        box-sizing: border-box;
        border: 1px solid #666;
        min-height: 400px
    }
}
</style>